<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>百度一下</title>
        <style>
             *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .header{
                height: 50px;
            }
            .header a{
                float: right;
                margin: 15px 20px 0px 5px;
                color: black;
                font-weight: bold;
            }
            .header a:nth-last-of-type(7){
                font-weight: normal;
            }
            .header a:nth-last-of-type(8){
                font-weight: normal;
            }
            .header span{
                background: #3388ff;
                color: white;
                float: right;
                margin: 11px 85px 0px 5px;
                padding: 3px 3px 3px 3px ;
            }
            .con{
                height: 500px;
            }
            .con .banner{
                width: 960px;
                height: 400px;
                margin: 5px auto 0px;
            }
            .con .banner h1{
                width: 300px;
                height: 144px;
                margin: 25px auto 0px;
            }
            .con .banner img{
                width: 300px;
            }
            .con .under{
                width: 650px;
                height: 35px;
                margin: 30px auto 0px;
            }
            .con .under input{
                width: 550px;
                height: 35px;
                background: url(images/camera_new_5606e8f.png) no-repeat right 20px center;
                border: 1px solid #b8b8b8;
                float: left;
            }
            .con .under span{
                line-height: 35px;
                background: #3388ff;
                padding: 7px 14px 9px 14px;
                color: white;
            }
            .footer{
                width: 960px;
                height: 250px;
                margin: 0px auto;
            }
            .footer .top h1{
                width: 60px;
                height: 60px;
                margin: 0px auto;
            }
            .footer .top p{
                width: 60px;
                font-size: 14px;
                font-weight: 800;
                color: #7d6666;
                margin: 5px auto 0px;
            }
            .footer .bottom{
                width: 960px;
                margin: 10px auto 0px;
            }
            .footer .bottom .mid{
                width: 420px;
                margin: 0px auto;
            }
            .footer .bottom a{
                font-size: 13px;
                color: #999999;
                margin: 0px 20px 0px 0px;
            }
            .footer .bottom a:nth-last-of-type(4){
                margin-left: 20px;
            }
            .footer .und{
                width: 650px;
                margin: 5px auto 0px;
            }
            .footer .und span{
                font-size: 13px;
                color: #999999;
            }
            .footer .und a:nth-last-of-type(2){
                margin: 0px;
            }
            .footer .und a:nth-last-of-type(1){
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <span>更多产品</span>
            <a href="">设置</a>
            <a href="">登录</a>
            <a href="">贴吧</a>
            <a href="">视频</a>
            <a href="">地图</a>
            <a href="">hao123</a>
            <a href="">新闻</a>
            <a href="">糯米</a>
        </div>
        <div class="con">
            <div class="banner">
                <h1>
                    <img src="images/bd_logo1.png" alt="">
                </h1>
                <div class="under">
                <input type="text">
                <span>百度一下</span>
            </div>
            </div>
        </div>
        <div class="footer">
            <div class="top">
                <h1>
                    <img src="images/zbios_efde696.png" alt="">
                </h1>
                <p>手机百度</p>
            </div>
            <div class="bottom">
                <div class="mid">
                <a href="">把百度设为主页</a>
                <a href="">关于百度</a>
                <a href="">About  Baidu</a>
                <a href="">百度推广</a>
            </div>
                <div class="und">
                    <span>©2016 Baidu</span>
                    <a href="">使用百度前必读 意见反馈</a>
                    <span>京ICP证030173号</span>
                    <a href="">京公网安备11000002000001号</a>
                </div>
            </div>
        </div>    
    </body>
</html>